<template>
  <div>
    <!--     搜索条件-->
    <SearchForm @search="getTableData" :isSearchDisabled="isSearchDisabled" @reset="clearSearch">
      <el-col :span="8" :xs="24" v-show="$permiss[481]">
        <el-form-item :label="$t('所属租户')" prop="adminUserId">
          <el-select style="width: 100%" @change="tenantChange" v-model="page.adminUserId" clearable>
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('订单编号')" prop="loanRecordId">
          <el-input v-model="page.loanRecordId"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('用户姓名')" prop="name">
          <el-input v-model="page.name"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('手机号码')" prop="phone">
          <el-input v-model="page.phone"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('身份证')">
          <el-input v-model="page.idcard" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('订单状态')" prop="approvalResult">
          <el-select v-model="page.approvalResult" style="width: 100%" clearable>
            <el-option v-for="item in orderStatusList" :label="item.label" :key="item.value"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[482]">
        <el-form-item :label="$t('APP名称')" prop="productName">
          <el-select style="width: 100%" v-model="page.productName" clearable>
            <el-option v-for="item in productList" :key="item.productId" :label="item.appName"
                       :value="item.productName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('用户状态')" prop="isRepeatedBorrowing">
          <el-select v-model="page.isRepeatedBorrowing" style="width: 100%" clearable>
            <el-option :label="$t('初借')" :value="0"></el-option>
            <el-option :label="$t('复借')" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('打款时间')" prop="paymentTime">
          <el-date-picker
              v-model="page.repaymentTime"
              style="width: 100%"
              type="daterange"
              unlink-panels
              value-format="yyyy-MM-dd"
              range-separator="~"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('还款时间')" prop="refundTime">
          <el-date-picker
              v-model="page.refundTime"
              style="width: 100%"
              type="daterange"
              unlink-panels
              value-format="yyyy-MM-dd"
              range-separator="~"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchForm>

    <el-card shadow="never" style="margin-top: 10px">
      <div style="text-align: right;margin-bottom: 10px" v-show="$permiss[784]">
        <el-button type="primary" @click="exportsExcel" :loading="exportsLoading">{{ $t('导出') }}</el-button>
      </div>
      <Table :loading="loading" max-height="600px" :table-data="tableData" :table-column="tableColumn" :page="page"
             @handleCurrentChange="handleCurrentChange"
             @handleSizeChange="handleSizeChange">
        <template slot="refundWay" slot-scope="{row}">
          {{ row.refundWay === 1 ? $t('先扣除手续费') : row.refundWay === 2 ? $t('先扣除手续费和利息') : $t('到期计算') }}
        </template>
      </Table>
    </el-card>
  </div>
</template>

<script>
import {export_json_to_excel} from "@/utils/exportExcel";
import {dateFormatSection, defaultTimeDate} from "@/utils/tools";
import {selectProduct, selectTenant} from "@/api/system";
import {incomeExpensesPage, incomeExpensesExport} from '@/api/finance'

export default {
  name: 'expenditureDetails',
  data() {
    return {
      tenantList: [],
      productList: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        refundTime: defaultTimeDate(14)
      },
      orderStatusList: [
        {label: this.$t('待还款'), value: 6},
        {label: this.$t('逾期'), value: 8},
        {label: this.$t('结清'), value: 9},
      ],
      tableColumn: [
        {label: this.$t('订单编号'), prop: 'loanRecordId', fixed: 'left', align: 'center', minWidth: 150},
        {label: this.$t('用户姓名'), prop: 'name',},
        {label: this.$t('手机号码'), prop: 'phone',},
        {label: this.$t('身份证'), prop: "idCard", align: "center", minWidth: 100,},
        {label: this.$t('APP名称'), prop: 'appName',},
        // {label: this.$t('借款次数'), prop: 'loanNum',},
        {label: this.$t('打款时间'), prop: 'paymentTime', minWidth: 150},
        {label: this.$t('合同金额'), prop: 'passAmount',},
        {label: this.$t('费用扣除方式'), prop: 'refundWay', slot: 'refundWay', minWidth: 150},
        {label: this.$t('打款金额'), prop: 'dealAmount',},
        {label: this.$t('打款渠道'), prop: 'paymentChannel',},
        {label: this.$t('第三方打款手续费'), prop: 'paymentHandFee', minWidth: 150},
        {label: this.$t('订单状态'), prop: 'approvalResult',},
        {label: this.$t('应还时间'), prop: 'refundDate', minWidth: 150},
        {label: this.$t('还款时间'), prop: 'refundTime', minWidth: 150},
        // {label: this.$t('还款阶段'), prop: 'refundStage',},
        {label: this.$t('还款渠道'), prop: 'refundChannel',},
        {label: this.$t('还款金额'), prop: 'refundAmount',},
        {label: this.$t('减免金额'), prop: 'remissionAmount',},
        {label: this.$t('优惠券抵扣金额'), prop: 'deductionAmount', align: 'center', minWidth: 120},
        {label: this.$t('第三方还款手续费'), prop: 'refundHandFee', minWidth: 150},
        {label: this.$t('服务费'), prop: 'serviceFeeIncome', minWidth: 150},
        {label: this.$t('利息收入'), prop: 'interestIncome',},
        {label: this.$t('逾期罚息收入'), prop: 'overdueIncome', minWidth: 150},
        {label: this.$t('溢出收入'), prop: 'overflowRefund',},
        {label: this.$t('盈亏金额'), prop: 'incomeExpenses',},
      ],
      tableData: [],
      loading: false,
      exportsLoading: false,
      isSearchDisabled: false
    }
  },
  mounted() {
    this.getTableData()
    selectTenant().then(res => {
      this.tenantList = res.data
    })
    selectProduct().then(res => {
      this.productList = res.data
    })
  },
  methods: {
    async getTableData() {
      this.loading = true
      this.isSearchDisabled = true
      const [paymentStartTime, paymentEndTime] = dateFormatSection(this.page.repaymentTime)
      const [refundStartTime, refundEndTime] = dateFormatSection(this.page.refundTime)
      const params = {
        paymentStartTime, paymentEndTime,
        refundStartTime, refundEndTime,
        ...this.page
      }
      delete params.repaymentTime
      delete params.refundTime
      const res = await incomeExpensesPage(params)
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list.map(item => {
          item.approvalResult = item.approvalResult === 6 ? this.$t('待还款') : item.approvalResult === 8 ? this.$t('逾期') : this.$t('结清')
          item.avoidAudit = item.avoidAudit === 1 ? this.$t('是') : item.avoidAudit === 2 ? this.$t('否') : ''
          return item
        })
        this.page.total = total
        this.isSearchDisabled = false
        this.loading = false
      } else {
        this.isSearchDisabled = false
        this.loading = false
      }
    },
    clearSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      }
      this.getTableData()
    },
    tenantChange(value) {
      selectProduct({adminUserId: value}).then(res => {
        this.productList = res.data
        this.$set(this.page,'productName', null)
      })
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    // 导出excel
    async exportsExcel() {
      this.exportsLoading = true;
      const [refundStartTime, refundEndTime] = dateFormatSection(this.page.refundTime || [])
      const [paymentStartTime, paymentEndTime] = dateFormatSection(this.page.repaymentTime || [])
      const params = {
        ...this.page,
        refundStartTime, refundEndTime,
        paymentStartTime, paymentEndTime
      };
      delete params.refundTime;
      delete params.repaymentTime;
      const res = await incomeExpensesExport(params);
      if (res.code === 1) {
        const headerData = [...this.tableColumn].filter(item => {
          const result = res.data.filter(i => {
            //过滤没有权限的字段
            return typeof i[item.prop] !== "undefined"
          })
          return result.length !== 0
        })
        const column = headerData.map(item => item.label)
        const filterVal = headerData.map(item => item.prop)
        const list = [...res.data].map((item) => {
          item.approvalResult = item.approvalResult === 6 ? this.$t('待还款') : item.approvalResult === 8 ? this.$t('逾期') : this.$t('结清')
          item.avoidAudit = item.avoidAudit === 1 ? this.$t('是') : item.avoidAudit === 2 ? this.$t('否') : ''
          item.refundWay = item.refundWay === 1 ? this.$t('先扣除手续费') : item.refundWay === 2 ? this.$t('先扣除手续费和利息') : ''
          return item
        }).map((v) => filterVal.map((j) => v[j]));
        const fileName = this.$t("收支明细表");
        export_json_to_excel({
          header: column,
          data: list,
          filename: fileName,
        });
        this.exportsLoading = false;
      } else {
        this.exportsLoading = false;
      }
    },
  }
}
</script>

<style scoped>

</style>
